<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <title>警告</title>
</head>

<body>
    <!-- .alert是警告的基础类 -->
    <!-- .alert-danger控制警告的颜色 -->
    <!-- .alert-dismissible让警告可以关闭 -->
    <!-- .fade让警告关闭时有渐渐消失的动画 -->
    <!-- .show显示警告 -->
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>危险！</strong>在此网站上检测到病毒
        <!-- .close样式化关闭按钮 -->
        <!-- data-dismiss="alert"让按钮可以关闭警告 -->
        <!-- &times;是一个乘号的符号 -->
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    <!-- 控制警告的颜色 -->
    <div class="alert alert-success alert-dismissible fade show">
        登陆成功
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    <!-- 警告中添加其他内容 -->
    <div class="alert alert-danger alert-dismissible fade show">
        <h4><i class="fa fa-angry"></i> 危险</h4>
        <p>当心病毒</p>
        <hr>
        <p>请启用防火墙来确保安全</p>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <div class="alert alert-danger fade show">
        <strong>危险！</strong>在此网站上检测到病毒
        <!-- 警告内的超链接可以使用.alert-link来样式化 -->
        <a href="" class="alert-link">预防措施</a>
        <!-- 去除data-dismiss="alert"后需要在jQuery手动关闭警告 -->
        <button type="button" class="close" id="close-alert" >&times;</button>
    </div>

    <div class="alert alert-success alert-dismissible fade" id="login-success">
        登陆成功
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    <!-- 用jQuery实现点击登陆按钮，让上面的登陆成功显示出来 -->
    <button class="btn btn-primary" id="login">登陆</button>

</body>
<script>
    $(document).ready(function(){
        // 给关闭按钮绑定点击事件
        $("#close-alert").click(function(){
            // 当按钮被点击时，移除按钮的父元素，也就是alert的div上的.show类来关闭警告
            $(this).parent().removeClass("show");
        });
        // 使用jQuery来显示一个警告
        $("#login").click(function(){
            $("#login-success").addClass("show");
        })

    })
</script>

</html>